// css 初始化
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; //c3盒模型
}

li {
    list-style: none;
}

// 声明图标字体
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}

body {
    background: url(../images/bg.jpg) no-repeat top center;
    line-height: 1.15;

    header {
        height: 1.25rem;
        background: url(../images/head_bg.png) no-repeat;
        background-size: 100% 100%;

        h1 {
            font-size: .475rem;
            line-height: 1rem;
            color: #fff;
            text-align: center;
        }

        .showTime {
            position: absolute;
            top: 0;
            right: .375rem;
            font-size: .25rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: .9375rem;
        }
    }

    //   主体内容区域样式
    .mainContainer {
        display: flex;
        min-width: 1240px;
        max-width: 1920px;
        margin: .125rem .125rem 0;

        .column {
            flex: 3;
        }

        .column:nth-child(2) {
            flex: 5;
            margin: 0 .125rem .1875rem;
            overflow: hidden;
        }
    }
}

//   侧边图样式
.panel {
    position: relative;
    height: 3.875rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
    padding: 0 .1875rem .5rem;
    margin-bottom: .1875rem;

    &::after,
    &::before {
        content: "";
        position: absolute;
        top: 0;
        border-top: 2px solid #02a6b5;
        height: .125rem;
        width: .125rem;
    }

    .panel-footer::after,
    &::after {
        right: 0;
        border-right: 2px solid #02a6b5;
    }

    .panel-footer::before,
    &::before {
        left: 0;
        border-left: 2px solid #02a6b5;
    }

    .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10px;

        &::after,
        &::before {
            content: "";
            position: absolute;
            top: 0;
            border-bottom: 2px solid #02a6b5;
            height: .125rem;
            width: .125rem;
        }
    }

    h2 {
        color: #fff;
        font-weight: 400;
        height: .6rem;
        font-size: .25rem;
        line-height: .6rem;
        text-align: center;
        a {
            text-decoration: none;
            margin: 0 .125rem;
            color: #fff;
        }
    }

    .chart {
        height: 3rem;
    }
}

.no {
    padding: .1875rem;
    background-color: rgba(101, 132, 226, 0.1);

    .no-hd {
        border: 1px solid rgba(25, 186, 139, 0.17);

        ul {
            position: relative;
            display: flex;

            li:nth-child(1)::after {
                content: "";
                position: absolute;
                right: 0;
                top: 25%;
                width: 1px;
                height: 50%;
                background-color: rgba(255, 255, 255, 0.2);
            }

            li {
                position: relative;
                flex: 1;
                height: 1rem;
                text-align: center;
                line-height: 1rem;
                font-size: .875rem;
                font-weight: bold;
                color: #ffeb7b;
                font-family: electronicFont;
            }

            &::before,
            &::after {
                content: "";
                position: absolute;
                height: .125rem;
                width: .4rem;
                height: .15rem;
            }

            &::after {
                left: 0;
                top: 0;
                border-left: 2px solid #02a6b5;
                border-top: 2px solid #02a6b5;
            }

            &::before {
                right: 0;
                bottom: 0;
                border-right: 2px solid #02a6b5;
                border-bottom: 2px solid #02a6b5;
            }
        }
    }
}

.no-bd {
    ul {
        display: flex;

        li {
            flex: 1;
            height: .5rem;
            padding-top: .125rem;
            font-size: .25rem;
            line-height: .5rem;
            text-align: center;
            color: #fff;
        }
    }
}
.map {
    position: relative;
    height: 10.125rem;
    .chart {
       position: absolute;
       left: 0;
       top: 0;
       height: 10.125rem;
       width: 100%;
       z-index: 5;
    }
    .map3,
    .map2,
    .map1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .map1 {
        height: 6.475rem;
        width: 6.475rem;
        background: url(../images/map.png);
        background-size: 100% 100%;
    }
    .map2 {
        height: 8.0375rem;
        width: 8.0375rem;
        background: url(../images/lbx.png);
        opacity: .6;
        z-index: 2;
        animation:rotate2 15s linear infinite;
        background-size: 100% 100%;
    }
    .map3 {
        height: 7.075rem;
        width: 7.075rem;
        background: url(../images/jt.png);
        background-size: 100% 100%;
        animation: rotate3 10s linear infinite;
    }
   @keyframes rotate2 {
       from {
           transform: translate(-50%,-50%) rotate(0deg);
       }
       to {
          transform: translate(-50%,-50%) rotate(360deg);
       }
   }
   @keyframes rotate3 {
       from {
           transform: translate(-50%,-50%) rotate(0);
       }
       to {
        transform: translate(-50%,-50%) rotate(-360deg);
       }
   }
}